<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>智能问诊系统</title>
  <style>
    :root {
      --primary-color: #6c5ce7;
      --primary-light: #a29bfe;
      --success-color: #00b894;
      --error-color: #d63031;
      --text-color: #2d3436;
      --text-light: #636e72;
      --bg-color: #f5f6fa;
      --card-color: #ffffff;
      --system-bubble: #ffffff;
      --user-bubble: #dfe6e9;
      --shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
      --radius: 16px;
      --small-radius: 8px;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    }

    body {
      background-color: var(--bg-color);
      color: var(--text-color);
      height: 100vh;
      display: flex;
      flex-direction: column;
      line-height: 1.6;
    }

    /* 顶部导航栏 */
    .chat-header {
      background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
      color: white;
      padding: 15px 20px;
      display: flex;
      align-items: center;
      position: relative;
      box-shadow: var(--shadow);
      z-index: 10;
    }

    .back-button {
      color: white;
      font-size: 20px;
      margin-right: 15px;
      text-decoration: none;
    }

    .chat-info {
      flex: 1;
      display: flex;
      align-items: center;
    }

    .chat-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      margin-right: 12px;
      object-fit: cover;
      border: 2px solid rgba(255, 255, 255, 0.3);
    }

    .chat-title {
      font-size: 18px;
      font-weight: 600;
    }

    .chat-status {
      font-size: 12px;
      opacity: 0.9;
      margin-top: 2px;
    }

    .chat-actions {
      display: flex;
      gap: 15px;
    }

    .chat-action {
      color: white;
      font-size: 18px;
      text-decoration: none;
    }

    /* 消息列表容器 */
    .messages-container {
      flex: 1;
      overflow-y: auto;
      padding: 20px;
      background-color: var(--bg-color);
      background-image: radial-gradient(circle at 1px 1px, rgba(0, 0, 0, 0.05) 1px, transparent 0);
      background-size: 20px 20px;
    }

    /* 消息行 */
    .message-row {
      display: flex;
      margin-bottom: 20px;
    }

    /* 收到的消息 */
    .message-row.received {
      justify-content: flex-start;
    }

    /* 发送的消息 */
    .message-row.sent {
      justify-content: flex-end;
    }

    /* 消息容器 */
    .message-container {
      display: flex;
      max-width: 85%;
    }

    .message-row.sent .message-container {
      flex-direction: row-reverse;
    }

    /* 头像 */
    .message-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      margin-top: auto;
      object-fit: cover;
      flex-shrink: 0;
      border: 2px solid rgba(255, 255, 255, 0.8);
      box-shadow: var(--shadow);
    }

    .message-row.received .message-avatar {
      margin-right: 12px;
    }

    .message-row.sent .message-avatar {
      margin-left: 12px;
    }

    /* 消息内容区域 */
    .message-content-area {
      display: flex;
      flex-direction: column;
      animation: fadeIn 0.3s ease-out;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* 消息气泡 */
    .message-content {
      padding: 14px 18px;
      border-radius: var(--radius);
      position: relative;
      word-wrap: break-word;
      box-shadow: var(--shadow);
      line-height: 1.5;
    }

    /* 系统消息 */
    .received .message-content {
      background-color: var(--system-bubble);
      color: var(--text-color);
      border-top-left-radius: var(--small-radius);
      border-bottom-right-radius: var(--radius);
      border-bottom-left-radius: var(--radius);
    }

    /* 用户消息 */
    .sent .message-content {
      background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
      color: white;
      border-top-right-radius: var(--small-radius);
      border-bottom-right-radius: var(--radius);
      border-bottom-left-radius: var(--radius);
    }

    /* 消息元信息 */
    .message-meta {
      display: flex;
      align-items: center;
      font-size: 11px;
      color: var(--text-light);
      margin-top: 8px;
    }

    .sent .message-meta {
      justify-content: flex-end;
    }

    .message-time {
      margin-left: 6px;
      font-weight: 500;
    }

    .received .message-time {
      color: var(--text-light);
    }

    .sent .message-time {
      color: var(--primary-light);
    }

    /* 问题提示 */
    .question-hint {
      font-size: 14px;
      color: var(--text-light);
      margin: 12px 0 8px;
      padding: 10px 14px;
      background-color: rgba(0, 0, 0, 0.03);
      border-radius: var(--small-radius);
      display: inline-block;
      border-left: 3px solid var(--primary-light);
    }

    /* 选项按钮 */
    .options-container {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 15px;
    }

    .option-button {
      padding: 12px 18px;
      background-color: white;
      border: none;
      border-radius: 20px;
      color: var(--text-color);
      font-size: 15px;
      cursor: pointer;
      transition: all 0.2s;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .option-button:hover {
      background-color: var(--primary-light);
      color: white;
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(108, 92, 231, 0.2);
    }

    /* 进度指示 */
    .progress-indicator {
      text-align: center;
      font-size: 13px;
      color: var(--text-light);
      margin: 20px 0 10px;
      position: relative;
    }

    .progress-indicator::before,
    .progress-indicator::after {
      content: "";
      position: absolute;
      top: 50%;
      width: 30%;
      height: 1px;
      background-color: rgba(0, 0, 0, 0.1);
    }

    .progress-indicator::before {
      left: 0;
    }

    .progress-indicator::after {
      right: 0;
    }

    /* 加载动画 */
    .typing-indicator {
      display: flex;
      padding: 14px 20px;
      background-color: var(--system-bubble);
      border-radius: var(--radius-md);
      width: fit-content;
      margin-bottom: 16px;
      box-shadow: var(--shadow-sm);
      align-items: center;
    }

    .typing-text {
      margin-right: 12px;
      font-size: 14px;
      color: var(--text-light);
    }

    .typing-dots {
      display: flex;
    }

    .typing-dot {
      width: 8px;
      height: 8px;
      background-color: var(--primary-light);
      border-radius: 50%;
      margin: 0 4px;
      animation: typingAnimation 1.6s infinite ease-in-out;
    }

    @keyframes typingAnimation {
      0%, 60%, 100% { transform: translateY(0); opacity: 0.6; }
      30% { transform: translateY(-6px); opacity: 1; }
    }

    /* 反馈消息 */
    .feedback-correct {
      background-color: var(--success-color) !important;
      color: white !important;
    }

    .feedback-incorrect {
      background-color: var(--error-color) !important;
      color: white !important;
    }

    /* 完成消息 */
    .completion-message {
      text-align: center;
      padding: 20px;
      margin: 20px 0;
      background-color: var(--card-color);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }

    .completion-message h3 {
      color: var(--primary-color);
      margin-bottom: 10px;
    }

    .completion-message p {
      color: var(--text-light);
      font-size: 14px;
    }

    /* 自定义滚动条 */
    ::-webkit-scrollbar {
      width: 6px;
    }

    ::-webkit-scrollbar-track {
      background: rgba(0, 0, 0, 0.05);
      border-radius: 3px;
    }

    ::-webkit-scrollbar-thumb {
      background: var(--primary-light);
      border-radius: 3px;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: var(--primary-color);
    }

    /* 响应式调整 */
    @media (max-width: 480px) {
      .messages-container {
        padding: 15px;
      }

      .message-container {
        max-width: 90%;
      }

      .message-content {
        padding: 12px 16px;
      }

      .message-avatar {
        width: 32px;
        height: 32px;
      }

      .option-button {
        padding: 10px 14px;
        font-size: 14px;
      }
    }
  </style>
  <link rel="stylesheet" href="../vandor/font-awesome/css/all.min.css">
</head>
<body>
<!-- 顶部导航栏 -->
<div class="chat-header">
  <a href="#" class="back-button">
    <i class="fas fa-arrow-left"></i>
  </a>
  <div class="chat-info">
    <img src="../image/docter.jpg" alt="助手头像" class="chat-avatar">
    <div>
      <div class="chat-title">智能问答助手</div>
      <div class="chat-status">曾庆</div>
    </div>
  </div>
  <div class="chat-actions">
    <a href="#" class="chat-action">
      <i class="fas fa-ellipsis-v"></i>
    </a>
  </div>
</div>

<!-- 消息列表 -->
<div class="messages-container" id="messagesContainer">

</div>

<script>
  // 用户头像
  const userAvatar = "../image/customer.jpg";

  // DOM元素
  const messagesContainer = document.getElementById('messagesContainer');
  let currentQuestionIndex = 0;

  //初始化
  init();
  //加载欢迎语
  function init(){
    const now = new Date();
    const hours = now.getHours().toString().padStart(2, '0');
    const minutes = now.getMinutes().toString().padStart(2, '0');
    const typingIndicator = document.createElement('div');
    typingIndicator.className = 'message-row received';
    typingIndicator.innerHTML = `
    <!-- 系统欢迎消息 -->
    <div class="message-container">
      <img src="../image/docter.jpg" alt="助手头像" class="message-avatar">
      <div class="message-content-area">
        <div class="message-content">
          <p>您好！我是智能问诊助手 🤖</p>
          <p>欢迎使用智能问诊系统！</p>
        </div>
        <div class="message-meta">
          <span class="message-time">${hours}:${minutes}</span>
        </div>
      </div>
    </div>
    `;
    messagesContainer.appendChild(typingIndicator);
    scrollToBottom();
  }

  //选择模式
  const questions = [
    {
      id: 1,
      question: "请您选择问诊时使用的模式？",
      answer: "",
      hint: "快速诊断模式，适合提供常见病和多发病的诊断及建议。<br>精确诊断模式，适用于疑难病及罕见病的诊断，因为鉴别诊断对比的需要，可能存在提问较多，持续时间稍长，反复提问可能，请您耐心回答，这样将给到您更加精准的诊断建议，谢谢您的配合。",
      options: ["快速模式","精准模式"],
      totalQuestions: 3
    }
  ];
  base_select(questions);

  //基础问题
  function base_select(questions){


      const typingIndicator = document.createElement('div');
      typingIndicator.className = 'message-row received';
      typingIndicator.innerHTML = `
                <div class="message-container">
                    <img src="../image/docter.jpg" alt="助手头像" class="message-avatar">
                    <div class="typing-text">助手正在输入...</div>
                    <div class="typing-indicator">
                        <div class="typing-dot"></div>
                        <div class="typing-dot"></div>
                        <div class="typing-dot"></div>
                    </div>
                </div>
            `;
      messagesContainer.appendChild(typingIndicator);
      scrollToBottom();

      if (currentQuestionIndex >= questions.length) {
        showCompletionMessage();
        return;
      }

      const questionData = questions[currentQuestionIndex];

    // 模拟延迟后显示问题
    setTimeout(() => {
      // 移除"正在输入"指示器
      messagesContainer.removeChild(typingIndicator);

      showBaseQuestion(questionData);
    },1500)
  }

  // 显示问题
  function showBaseQuestion(questionData) {
    const now = new Date();
    const hours = now.getHours().toString().padStart(2, '0');
    const minutes = now.getMinutes().toString().padStart(2, '0');

    const questionMessage = document.createElement('div');
    questionMessage.className = 'message-row received';
    questionMessage.innerHTML = `
                <div class="message-container">
                    <img src="../image/docter.jpg" alt="助手头像" class="message-avatar">
                    <div class="message-content-area">
                        <div class="message-content">
                            <p>${questionData.question}</p>
                            <div class="question-hint">${questionData.hint}</div>
                            <div class="options-container">
                                ${questionData.options.map(option =>
            `<div class="option-button" data-question-id="${questionData.id}" data-answer="${option}">${option}</div>`
    ).join('')}
                            </div>
                        </div>
                        <div class="message-meta">
                            <span class="message-time">${hours}:${minutes}</span>
                        </div>
                    </div>
                </div>
            `;

    messagesContainer.appendChild(questionMessage);
    scrollToBottom();

    // 添加选项按钮点击事件 - 点击后自动发送
    const optionButtons = questionMessage.querySelectorAll('.option-button');
    optionButtons.forEach(button => {
      button.addEventListener('click', function() {
        const questionId = this.getAttribute('data-question-id');
        const selectedAnswer = this.getAttribute('data-answer');
        sendAnswerToBase(questionId, selectedAnswer);
      });
    });
  }

  //收集基础问答
  function sendAnswerToBase(questionId, answer) {
    // 显示用户回答
    const now = new Date();
    const hours = now.getHours().toString().padStart(2, '0');
    const minutes = now.getMinutes().toString().padStart(2, '0');

    const userMessage = document.createElement('div');
    userMessage.className = 'message-row sent';
    userMessage.innerHTML = `
                <div class="message-container">
                    <img src="${userAvatar}" alt="用户头像" class="message-avatar">
                    <div class="message-content-area">
                        <div class="message-content">${answer}</div>
                        <div class="message-meta">
                            <span class="message-time">${hours}:${minutes}</span>
                        </div>
                    </div>
                </div>
            `;
    messagesContainer.appendChild(userMessage);
    scrollToBottom();

    // 模拟响应
    setTimeout(() => {
      showBaseFeedback(answer);
      currentQuestionIndex++;
      getQuestionFromBase();
    }, 1000);
  }

  // 显示基础问答反馈
  function showBaseFeedback(answer) {
    const now = new Date();
    const hours = now.getHours().toString().padStart(2, '0');
    const minutes = now.getMinutes().toString().padStart(2, '0');

    const feedbackMessage = document.createElement('div');
    feedbackMessage.className = 'message-row received';

    feedbackMessage.innerHTML = `
                  <div class="message-container">
                      <img src="../image/docter.jpg" alt="助手头像" class="message-avatar">
                      <div class="message-content-area">
                          <div class="message-content feedback-correct">
                              <i class="fas fa-check-circle"></i> 你的回答是：<br>
                              <small>${answer}</small>
                          </div>
                          <div class="message-meta">
                              <span class="message-time">${hours}:${minutes}</span>
                          </div>
                      </div>
                  </div>
              `;
    messagesContainer.appendChild(feedbackMessage);
    scrollToBottom();
  }

  function getQuestionFromBase() {
    // 显示"正在输入"指示器
    const typingIndicator = document.createElement('div');
    typingIndicator.className = 'message-row received';
    typingIndicator.innerHTML = `
                <div class="message-container">
                    <img src="../image/docter.jpg" alt="助手头像" class="message-avatar">
                    <div class="typing-text">助手正在输入...</div>
                    <div class="typing-indicator">
                        <div class="typing-dot"></div>
                        <div class="typing-dot"></div>
                        <div class="typing-dot"></div>
                    </div>
                </div>
            `;
    messagesContainer.appendChild(typingIndicator);
    scrollToBottom();

    setTimeout(() => {
      // 模拟响应数据
      const questions = [
        {
          id: 1,
          question: "请您选择问诊时使用的模式？",
          answer: "",
          hint: "快速诊断模式，适合提供常见病和多发病的诊断及建议。精确诊断模式，适用于疑难病及罕见病的诊断，因为鉴别诊断对比的需要，可能存在提问较多，持续时间稍长，反复提问可能，请您耐心回答，这样将给到您更加精准的诊断建议，谢谢您的配合。",
          options: ["快速模式","精准模式"],
          totalQuestions: 1
        },
        {
          id: 2,
          question: "请选择您的性别？",
          answer: "",
          hint: "请选择男或女",
          options: ["男", "女"],
          totalQuestions: 3
        },
        {
          id: 3,
          question: "请选择您的生日？",
          answer: "",
          hint: "请选择出生日期",
          options: [],
          totalQuestions: 3
        },
        {
          id: 4,
          question: "请输入您最不舒服的症状及持续时间？如左手痛，持续一周......",
          answer: "",
          hint: "请输入症状和持续时间",
          options: [],
          totalQuestions: 3
        }
      ];

      if (currentQuestionIndex >= questions.length) {
        showCompletionMessage();
        return;
      }

      const questionData = questions[currentQuestionIndex];

      // 移除"正在输入"指示器
      messagesContainer.removeChild(typingIndicator);

      // 显示问题
      showBaseQuestion(questionData);

    }, 1500);
  }


  //先问答和填写基础问题

  // 初始化 - 从服务器获取第一个问题
  //getQuestionFromServer();

  // 从服务器获取问题
  function getQuestionFromServer() {
    // 显示"正在输入"指示器
    const typingIndicator = document.createElement('div');
    typingIndicator.className = 'message-row received';
    typingIndicator.innerHTML = `
                <div class="message-container">
                    <img src="../image/docter.jpg" alt="助手头像" class="message-avatar">
                    <div class="typing-indicator">
                        <div class="typing-dot"></div>
                        <div class="typing-dot"></div>
                        <div class="typing-dot"></div>
                    </div>
                </div>
            `;
    messagesContainer.appendChild(typingIndicator);
    scrollToBottom();

    // 模拟AJAX请求获取问题
    setTimeout(() => {
      // 这里应该是实际的AJAX请求
      // fetch('/api/get-question')
      //     .then(response => response.json())
      //     .then(data => {
      //         messagesContainer.removeChild(typingIndicator);
      //         showQuestion(data);
      //     })
      //     .catch(error => {
      //         console.error('获取问题失败:', error);
      //         showError('获取问题失败，请重试');
      //     });
     /* fetch("/AiMedical/api/deepseek/askDs",{
        method: "POST",
        headers:{
          "Content-Type":"application/json"
        },
        body:JSON.stringify({
          "model":"deepseek-chat",
          "messages":[
            {"role":"user","content":"左手痛"}
          ],
          "stream":false,
          "stopFlag":false
        }),

      }).then(response => response.json())
        .then(data => {
            messagesContainer.removeChild(typingIndicator);
            showQuestion(data);
       }).catch(error => {
           console.error('获取问题失败:', error);
           showError('获取问题失败，请重试');
       });*/

      // 模拟响应数据
      const questions = [
        {
          id: 1,
          question: "请问中国的首都是哪个城市？",
          answer: "北京",
          hint: "请点击选择中国的首都",
          options: ["北京", "上海", "广州", "深圳"],
          totalQuestions: 3
        },
        {
          id: 2,
          question: "以下哪种动物是哺乳动物？",
          answer: "鲸鱼",
          hint: "哺乳动物的特点是胎生、用肺呼吸",
          options: ["鲸鱼", "企鹅", "鳄鱼", "蛇"],
          totalQuestions: 3
        },
        {
          id: 3,
          question: "太阳系中最大的行星是？",
          answer: "木星",
          hint: "它是太阳系中的气态巨行星",
          options: ["地球", "火星", "木星", "土星"],
          totalQuestions: 3
        }
      ];

      if (currentQuestionIndex >= questions.length) {
        showCompletionMessage();
        return;
      }

      const questionData = questions[currentQuestionIndex];

      // 移除"正在输入"指示器
      messagesContainer.removeChild(typingIndicator);

      // 显示问题
      showQuestion(questionData);

    }, 1500);
  }

  // 显示问题
  function showQuestion(questionData) {
    const now = new Date();
    const hours = now.getHours().toString().padStart(2, '0');
    const minutes = now.getMinutes().toString().padStart(2, '0');

    const questionMessage = document.createElement('div');
    questionMessage.className = 'message-row received';
    questionMessage.innerHTML = `
                <div class="message-container">
                    <img src="../image/docter.jpg" alt="助手头像" class="message-avatar">
                    <div class="message-content-area">
                        <div class="message-content">
                            <p>${questionData.question}</p>
                            <div class="question-hint">${questionData.hint}</div>
                            <div class="options-container">
                                ${questionData.options.map(option =>
            `<div class="option-button" data-question-id="${questionData.id}" data-answer="${option}">${option}</div>`
    ).join('')}
                            </div>
                        </div>
                        <div class="message-meta">
                            <span class="message-time">${hours}:${minutes}</span>
                        </div>
                    </div>
                </div>
            `;

    messagesContainer.appendChild(questionMessage);
    scrollToBottom();

    // 添加选项按钮点击事件 - 点击后自动发送
    const optionButtons = questionMessage.querySelectorAll('.option-button');
    optionButtons.forEach(button => {
      button.addEventListener('click', function() {
        const questionId = this.getAttribute('data-question-id');
        const selectedAnswer = this.getAttribute('data-answer');
        sendAnswerToServer(questionId, selectedAnswer);
      });
    });
  }

  // 发送答案到服务器
  function sendAnswerToServer(questionId, answer) {
    // 显示用户回答
    const now = new Date();
    const hours = now.getHours().toString().padStart(2, '0');
    const minutes = now.getMinutes().toString().padStart(2, '0');

    const userMessage = document.createElement('div');
    userMessage.className = 'message-row sent';
    userMessage.innerHTML = `
                <div class="message-container">
                    <img src="${userAvatar}" alt="用户头像" class="message-avatar">
                    <div class="message-content-area">
                        <div class="message-content">${answer}</div>
                        <div class="message-meta">
                            <span class="message-time">${hours}:${minutes}</span>
                        </div>
                    </div>
                </div>
            `;
    messagesContainer.appendChild(userMessage);
    scrollToBottom();

    // 模拟AJAX请求提交答案
    // fetch('/api/submit-answer', {
    //     method: 'POST',
    //     headers: {
    //         'Content-Type': 'application/json',
    //     },
    //     body: JSON.stringify({
    //         questionId: questionId,
    //         answer: answer
    //     }),
    // })
    // .then(response => response.json())
    // .then(data => {
    //     showFeedback(data.isCorrect, data.correctAnswer);
    //     currentQuestionIndex++;
    //     getQuestionFromServer();
    // })
    // .catch(error => {
    //     console.error('提交答案失败:', error);
    //     showError('提交答案失败，请重试');
    // });

    // 模拟响应
    setTimeout(() => {
      // 模拟正确答案数据
      const correctAnswers = {
        1: "北京",
        2: "鲸鱼",
        3: "木星"
      };

      const isCorrect = answer === correctAnswers[questionId];
      showFeedback(isCorrect, correctAnswers[questionId]);

      currentQuestionIndex++;
      getQuestionFromServer();
    }, 1000);
  }

  // 显示反馈
  function showFeedback(isCorrect, correctAnswer) {
    const now = new Date();
    const hours = now.getHours().toString().padStart(2, '0');
    const minutes = now.getMinutes().toString().padStart(2, '0');

    const feedbackMessage = document.createElement('div');
    feedbackMessage.className = 'message-row received';

    if (isCorrect) {
      feedbackMessage.innerHTML = `
                    <div class="message-container">
                        <img src="../image/docter.jpg" alt="助手头像" class="message-avatar">
                        <div class="message-content-area">
                            <div class="message-content feedback-correct">
                                <i class="fas fa-check-circle"></i> 回答正确！<br>
                                <small>${correctAnswer} 是正确的答案</small>
                            </div>
                            <div class="message-meta">
                                <span class="message-time">${hours}:${minutes}</span>
                            </div>
                        </div>
                    </div>
                `;
    } else {
      feedbackMessage.innerHTML = `
                    <div class="message-container">
                        <img src="../image/docter.jpg" alt="助手头像" class="message-avatar">
                        <div class="message-content-area">
                            <div class="message-content feedback-incorrect">
                                <i class="fas fa-times-circle"></i> 回答不正确<br>
                                <small>正确答案是: ${correctAnswer}</small>
                            </div>
                            <div class="message-meta">
                                <span class="message-time">${hours}:${minutes}</span>
                            </div>
                        </div>
                    </div>
                `;
    }

    messagesContainer.appendChild(feedbackMessage);
    scrollToBottom();
  }

  // 显示完成消息
  function showCompletionMessage() {
    const now = new Date();
    const hours = now.getHours().toString().padStart(2, '0');
    const minutes = now.getMinutes().toString().padStart(2, '0');

    const completionMessage = document.createElement('div');
    completionMessage.className = 'message-row received';
    completionMessage.innerHTML = `
                <div class="message-container">
                    <img src="../image/docter.jpg" alt="助手头像" class="message-avatar">
                    <div class="message-content-area">
                        <div class="completion-message">
                            <h3><i class="fas fa-trophy"></i> 问答完成！</h3>
                            <p>您已经回答了所有问题，感谢您的参与！</p>
                        </div>
                        <div class="message-meta">
                            <span class="message-time">${hours}:${minutes}</span>
                        </div>
                    </div>
                </div>
            `;

    messagesContainer.appendChild(completionMessage);
    scrollToBottom();
  }

  // 显示错误消息
  function showError(message) {
    const now = new Date();
    const hours = now.getHours().toString().padStart(2, '0');
    const minutes = now.getMinutes().toString().padStart(2, '0');

    const errorMessage = document.createElement('div');
    errorMessage.className = 'message-row received';
    errorMessage.innerHTML = `
                <div class="message-container">
                    <img src="../image/docter.jpg" alt="助手头像" class="message-avatar">
                    <div class="message-content-area">
                        <div class="message-content feedback-incorrect">
                            <i class="fas fa-exclamation-circle"></i> ${message}
                        </div>
                        <div class="message-meta">
                            <span class="message-time">${hours}:${minutes}</span>
                        </div>
                    </div>
                </div>
            `;

    messagesContainer.appendChild(errorMessage);
    scrollToBottom();
  }

  // 滚动到底部
  function scrollToBottom() {
    messagesContainer.scrollTop = messagesContainer.scrollHeight;
  }
</script>
</body>
</html>